import { Row, Col, Upload, Grid, message, Image } from 'antd';
import wx from 'weixin-js-sdk';
import { Modal } from 'antd-mobile';
import React, { useRef, useEffect, useState, useMemo } from 'react';
import { getFetch } from '@/utils/doFetch';
import {
  PlusOutlined,
  CloseCircleFilled,
  LoadingOutlined,
} from '@ant-design/icons';
import styles from './index.less';
const alert = Modal.alert;

let FileUpload = ({ value, onChange }) => {
  const [imglist, setimglist] = useState([]),
    [loading, cload] = useState(false);

  useEffect(() => {
    getFetch({
      url: '/vehicle-api/wechat/signature',
      params: { url: document.URL },
    }).then((res) => {
      if (res.code == 0) {
        wx.config({
          debug: false,
          appId: res.data.app_id,
          timestamp: res.data.timestamp,
          nonceStr: res.data.nonce_str,
          signature: res.data.signature,
          jsApiList: [
            'scanQRCode',
            'chooseImage',
            'uploadImage',
            'getLocalImgData',
          ],
        });
        wx.ready(function () {});
        wx.error(function (err) {});
      }
    });
  }, []);

  const uploadBtn = (
    <>
      {loading ? (
        <LoadingOutlined style={{ fontSize: 24 }} spin></LoadingOutlined>
      ) : (
        <PlusOutlined style={{ fontSize: 24 }} />
      )}
    </>
  );

  return (
    <div
      className={styles.mainpiclist}
      style={{
        display: 'flex',
        justifyContent: 'flex-start',
        alignItems: 'center',
      }}
    >
      <div>
        {imglist &&
          imglist.map((it, i) => {
            return (
              <div
                style={{
                  position: 'relative',
                  margin: '0px 12px 12px 0px',
                  width: 'calc(25vw - 15px)',
                  height: 'calc(25vw - 15px)',
                  marginRight: (i + 1) % 4 == 0 ? 0 : 12,
                }}
                key={i}
              >
                <div
                  style={{
                    color: 'red',
                    position: 'absolute',
                    right: -6,
                    top: -6,
                    zIndex: 999,
                    backgroundColor: '#fff',
                    borderRadius: '50%',
                    width: 14,
                    height: 14,
                  }}
                  className="center"
                >
                  <CloseCircleFilled
                    style={{
                      color: 'red',
                      fontSize: 16,
                    }}
                    onClick={() => {
                      let newlist = imglist.filter((item, index) => index != i),
                        newval = value.filter((item, index) => index != i);

                      setimglist(newlist);
                      onChange(newval);
                    }}
                  ></CloseCircleFilled>
                </div>

                <Image
                  className="images"
                  src={it}
                  width={'100%'}
                  height={'100%'}
                ></Image>
              </div>
            );
          })}
        {value.length < 9 ? (
          <div
            className={styles.upload}
            onClick={() => {
              wx?.chooseImage({
                count: 9, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                  var localIds = res.localIds;
                  setimglist((imglist) => {
                    return [...imglist, ...localIds];
                  });
                  cload(true);
                  localIds.map((it) => {
                    wx?.uploadImage({
                      localId: it, // 需要上传的图片的本地ID，由chooseImage接口获得
                      isShowProgressTips: 1, // 默认为1，显示进度提示
                      success: function (res) {
                        var serverId = [res.serverId]; // 返回图片的服务器端ID
                        onChange([...value, ...serverId]);
                        cload(false);
                      },
                      fail: function (res) {
                        cload(false);
                      },
                    });
                  });
                },
              });
            }}
          >
            {uploadBtn}
          </div>
        ) : null}
      </div>
    </div>
  );
};

export default FileUpload;
